<script setup lang="ts">
import useTabStore from '@apps/_share/store/tab'

const loading = ref(true)
const isLoaded = ref(false)
const hasError = ref(false)

const tabStore = useTabStore()

const iframeSrc = computed(() => tabStore.currentTab?.iframeSrc)

function onLoad() {
  isLoaded.value = true
  hasError.value = false
  loading.value = false
}

function onError() {
  isLoaded.value = false
  hasError.value = true
  loading.value = false
}
</script>

<template>
  <div
    v-loading="loading"
    class="w-full h-full"
  >
    <iframe
      class="w-full h-full"
      :src="iframeSrc"
      frameborder="0"
      @load="onLoad"
      @error="onError"
    />

    <ElEmpty v-if="hasError">
      <template #description>
        <span>加载失败,请检查地址是否正确</span>
        <ElLink
          v-underline
          type="danger"
        >
          {{ iframeSrc }}
        </ElLink>
      </template>
    </ElEmpty>
  </div>
</template>
